<template>
	<!-- 小区管理 -->
	<el-container>
		<!-- 左侧边栏 :width="isCollapse ? '64px':'220px'"-->
		<el-aside>
			<el-menu :default-active="this_Active" class="el-menu-vertical-demo" background-color="#304156"
				:collapse="isCollapse" text-color="rgb(191, 203, 217)" style="border-right: none;" unique-opened router>
				<!-- 主页 -->
				<el-menu-item index="/home">
					<i class="el-icon-setting"></i>
					<span slot="title">首页</span>
				</el-menu-item>
				<!-- 小区管理 -->
				<el-menu-item index="/quarters">
					<i class="el-icon-setting"></i>
					<span slot="title">小区管理</span>
				</el-menu-item>
				<!-- 帮买取快递废品回收 -->
				<el-submenu :key="index" v-for="(item,index) in left_scroll_data" :index="item.link+''">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>{{item.title}}</span>
					</template>

					<el-menu-item :key="ind" v-for="(it,ind) in item.childrens" :index="it.link+''">
						<i class="el-icon-link"></i>
						{{it.title}}
					</el-menu-item>
				</el-submenu>
				<!-- 用户管理 -->
				<el-menu-item index="/usermanage">
					<i class="el-icon-setting"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>
				<!-- 骑手管理 -->
				<el-menu-item index="/rider">
					<i class="el-icon-setting"></i>
					<span slot="title">骑手管理</span>
				</el-menu-item>

				<el-menu-item index="7">
					<i class="el-icon-setting"></i>
					<span slot="title">家政管理</span>
				</el-menu-item>

				<el-menu-item index="8">
					<i class="el-icon-setting"></i>
					<span slot="title">新用户红包</span>
				</el-menu-item>

				<el-menu-item index="9">
					<i class="el-icon-setting"></i>
					<span slot="title">类目管理</span>
				</el-menu-item>

				<el-menu-item index="/">
					<i class="el-icon-setting"></i>
					<span slot="title">退出登录</span>
				</el-menu-item>
			</el-menu>
		</el-aside>

		<!-- 右侧 -->
		<el-container>
			<!-- 右侧头 -->
			<el-header>
				<div class="left">
					<button @click="change_Collapse" class="control_Collapse">
						<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
					</button>
				</div>
				<div class="right">
					<div class="control_Icon">
						<el-tooltip class="item" effect="dark" content="搜索" placement="bottom">
							<i class="el-icon-search"></i>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
							<i class="el-icon-full-screen"></i>
						</el-tooltip>
					</div>
					<el-dropdown @command="menu_Link">
						<span class="el-dropdown-link">
							<img id="user_tx" src="../assets/icon/此间最上乘.jpg" />
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="user" icon="el-icon-user">个人中心</el-dropdown-item>
							<el-dropdown-item command="home" icon="el-icon-house">首页</el-dropdown-item>
							<el-dropdown-item command="" icon="el-icon-folder">项目地址</el-dropdown-item>
							<el-dropdown-item command="" icon="el-icon-document">Docs</el-dropdown-item>
							<el-dropdown-item command="exit" icon="el-icon-switch-button"
								divided>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>

			<!-- 右侧体 -->
			<el-main>
				<transition name="fade" mode="out-in">
					<router-view></router-view>
				</transition>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				this_Active: '/home',
				isCollapse: false,
				left_scroll_data: [{
					link: '/help',
					title: '帮买取快递废品回收',
					childrens: [{
						link: '/help/store',
						title: '门店管理',
					}, {
						link: '/help/courierstation',
						title: '驿站管理'
					}, {
						link: '/help/commodity',
						title: '商品管理',
					}, {
						link: '1-4',
						title: '订单管理',
					}, {
						link: '1-5',
						title: '废品回收订单',
					}]
				}, {
					link: '/groupBuy',
					title: '胖虎甄选',
					childrens: [{
						link: '/help/commodity',
						title: '商品管理',
					}, {
						link: '2-2',
						title: '订单管理'
					}, {
						link: '2-3',
						title: '售后订单',
					}, ]
				}, {
					link: '/housekeeping',
					title: '胖虎家政',
					childrens: [{
						link: '3-1',
						title: '家政管理',
					}, {
						link: '3-2',
						title: '订单管理',
					}, {
						link: '3-3',
						title: '售后订单',
					}, ]
				}, ]
			}
		},
		methods: {
			change_Collapse() {
				this.isCollapse = !this.isCollapse
			},
			menu_Link(val) {
				if (val == 'exit') this.$router.push('/')
				else if (val == 'home') this.$router.push('/home')
				else console.log(val)
			}
		},
		mounted() {
			// console.log(this.$route.path);
			this.this_Active = this.$route.path
		},
	}
</script>

<style>
	/* 路由跳转动画 */
	.fade-enter-active {
		animation: animei_enter 0.5s;
	}

	.fade-leave-active {
		animation: animei_leave 0.5s reverse;
	}

	@keyframes animei_enter {
		0% {
			opacity: 0;
			margin-left: -10%;
			width: 100%;
		}

		100% {
			opacity: 1;
			margin-left: 0%;
			width: 100%;
		}
	}

	@keyframes animei_leave {
		0% {
			opacity: 0;
			margin-left: 10%;
			width: 100%;
		}

		100% {
			opacity: 1;
			margin-left: 0%;
			width: 100%;
		}
	}

	/* 头像加载动画 */
	#user_tx {
		animation-duration: 1s;
		animation-name: user_tx;
	}

	@keyframes user_tx {
		from {
			rotate: 45deg;
			margin-left: 100%;
			width: 100%;
		}

		to {
			rotate: 0deg;
			margin-left: 0%;
			width: 100%;
		}
	}


	.el-aside {
		scrollbar-width: none;
		display: flex;
		width: auto !important;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 220px;
	}

	.el-menu {
		height: 100%;
	}

	.el-header {
		box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, .08);
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.el-header .right {
		display: flex;
		flex-wrap: nowrap;
		justify-items: end;
	}

	.el-header .right .control_Icon {
		font-size: 30px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.el-header .right i {
		margin-right: 20px;
	}

	.el-header .right img {
		height: 50px;
		width: 50px;
		border-radius: 50%;
	}

	.control_Collapse {
		height: 50px;
		width: 50px;
		background: none;
		border: none;
		font-size: 30px;
	}

	.el-container {
		height: 100vh;
	}

	.el-submenu .el-menu-item {
		background-color: #1f2d3d !important;
	}

	.el-submenu .el-menu-item:hover {
		background-color: #001528 !important;
	}
</style>

<!-- 
 我自關山點酒 千秋皆入喉
 更有沸雪酌與風雲某
 我是千里故人 青山應白首
 年少猶借銀槍逞風流
 幾載風雪捲刃 朔風同孤晝
 瞧得亂世 一般嶙峋瘦
 塞外硝煙未斷 黃雲遍地愁
 僥倖紅梅久 不曾下枝頭
 長煙入懷 潦草作運籌
 踏過飛沙拔劍斬仇寇
 殘陽暮火 春風上重樓
 亂世烽火不盡長安囚
 我自關山點酒 千秋皆入喉
 更有沸雪酌與風雲某
 我是千里故人 青山應白首
 年少猶借銀槍逞風流
 我曾長安走馬 十街任斗酒
 驚夢照烽火 今宵試新鍪
 倘若魂斷沙場 不見失地收
 誰共誰不朽 金戈亦染鏽
 天命輕狂 應似孤鴻遊
 向人世間盡一腹鬼謀
 縱意而歌 玉懷斟北斗
 河山萬里願與君同守
 我自關山點酒 千秋皆入喉
 更有沸雪酌與風雲某
 我是千里故人 青山應白首
 年少猶借銀槍逞風流
 我自關山點酒 千秋皆入喉
 更有沸雪酌與風雲某
 我是千里故人 青山應白首
 年少猶借銀槍逞風流
 -->